<template>
    <div class="eventLink"
    :style="{backgroundImage:'url('+imgUrlLink(eventItem.themeIcon)+')'}">
    <div class="eventbox">
      <div>
        <h3 class="mb10">{{eventItem.title}}</h3>
        <p class="addrTime">
          <img src="@/assets/indexImage/address_icon.png" alt="">
          {{eventItem.hdCity}}
          &nbsp;&nbsp;&nbsp;
          <img src="@/assets/indexImage/time_icon.png" alt="">
          {{reSetTime(eventItem.startBegin)}}
        </p>
      </div>
      <div align="right">
        <!-- 点赞 -->
        <span @click="praise()">
          <img src="@/assets/indexImage/praise_icon_sel.png" alt="" v-if="eventItem.praise">
          <img src="@/assets/indexImage/praise_icon_norl.png" alt="" v-else>
           {{eventItem.praiseCount}}
         </span>
          &nbsp;&nbsp;
          <!-- 评论 -->
        <span @click="toMessagePage()">
          <img src="@/assets/indexImage/comment_icon.png" alt="">
           {{eventItem.commentCount}}
        </span>
      </div>
    </div>
  </div>
</template>
<script>
import { imgUrlLink } from '@/utils/util.js';
import {matchPraise} from '@/utils/ajaxRequest.js';
export default {
  name: "",
  props: ['eventItem'],
  data: () => ({
    xlyd_loginInfo:'',     //用户信息
    matchId:'',   //赛事id
    detailInfo:'',    //
  }),
  mounted() {
    //do something after mounting vue instance
    this.matchId = this.eventItem.id;
    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
    this.xlyd_loginInfo = xlyd_loginInfo;
    this.$nextTick(()=>{
      this.detailInfo = this.eventItem;
      // console.log(this.detailInfo);
    })

  },
  methods: {
    // 返回时间去掉后面的时分秒
    reSetTime(timer) {
      return timer.split(' ')[0];
    },
    // 图片地址拼接
    imgUrlLink(imgurl) {
      return this.$imgUrlLink(imgurl);
    },
    // 点赞、取消点赞
    praise() {
      let self = this;
      let xlyd_loginInfo = this.xlyd_loginInfo;

      let praise = self.eventItem.praise;    //自己是否点赞
      let praiseCount = self.eventItem.praiseCount;   //点赞数量

      if(xlyd_loginInfo=='' || xlyd_loginInfo==undefined) {
        self.messageBox.confirm('您还未登录').then(action=>{
          self.$router.push({name:'login'});
        }).catch(error=>{
          console.log(error);
        })
      }else {   //已登录
        let praiseParam = {
          matchId:self.eventItem.id,
          token:self.xlyd_loginInfo.token
        }
        matchPraise(praiseParam).then(res=>{
          console.log(res);
          if(res) {
            self.toast(res.data.msg);
            self.eventItem.praise = !praise;
            if(res.data.result==0) {    //当前为取消点赞
              self.eventItem.praiseCount = praiseCount-1;
            }else {
              self.eventItem.praiseCount = praiseCount+1;
            }
          }
        })
      }
    },
    // 跳转到评论页面
    toMessagePage() {
      console.log(this.eventItem.id);
      let self = this;
      let xlyd_loginInfo = this.xlyd_loginInfo;
      if(!xlyd_loginInfo) {
        self.messageBox.confirm('请先登录').then(active=>{
          self.$router.push({name:'login'});
        }).catch(error=>{
          console.log(error);
        })
        return false;
      }
      this.$router.push({path:'/eventMessage',query:{matchId:this.eventItem.id}});
    }
  }
}
</script>
<style lang="scss" scoped>
.eventLink{
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  img{
    width: 15px;
  }
}
.eventbox{
  height: 140px;
  background: rgba(0,0,0,0.4);
  color: white;
  @include flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  padding: 10px;
  div{
    width: 100%;
  }
  .addrTime{
    font-size: 12px;
  }
}
</style>
